<template>
    <div>
        <p>看看品类</p>
        <div class="tap">
            <ul>
                <li v-for="(item, index) in items" :key="item.id" :class="{ active: item.active }"
                    @click="tapActive(index)">
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <div class="list">
            <ul>
                <li v-for="food in filteredFoods" :key="food.name">
                    <router-link :to="{ name: 'details', params: { food } }"> <!-- 使用params传递食物信息 -->
                        <div class="img" :style="{ backgroundImage: 'url(' + food.img + ')' }"></div>
                        <p>{{ food.name }}</p>
                    </router-link>
                    <div class="text">
                        <span>月售:</span>
                        <span>{{ food.sales }}</span>
                    </div>
                    <div class="rich">
                        <span>￥{{ food.price }}</span>
                        <van-icon name="bag-o" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
p {
    font-size: 16px;
    font-weight: bold;
}

.tap {
    margin-top: 10px;
    margin-bottom: 20px;
    ul {
        display: flex;
        height: 27px;
        width: 100%;

        li {
            width: 66px;
            line-height: 27px;
            margin-right: 10px;
            font-size: 12px;
            cursor: pointer;
            padding: 0 10px;
            background-color: #F5F5F7;
            text-align: center;
            border-radius: 16px;
        }

        li.active {
            background-color: #1EC28A;
            color: #ffffff;
        }
    }
}

.list {
    width: 100%;
    margin-bottom: 48px;
    ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        li {
            width: 168px;
            height: 262px;
            background-color: #FFFFFF;
            border-radius: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            .img {
                width: 168px;
                height: 168px;
                border-radius: 16px;
                background-size: cover;
                background-position: center;
            }

            p {
                font-size: 14px;
                font-weight: bold;
                margin-top: 10px;
                margin-left: 15px;
            }

            .text {
                margin-left: 15px;
                margin-top: 5px;
                font-size: 12px;
                color: #c4c4c4;

                span {
                    margin-right: 5px;
                }
            }

            .rich {
                margin-left: 15px;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                font-size: 14px;

                span {
                    color: red;
                }

                .van-icon {
                    font-size: 20px;
                    color: #1EC28A;
                    margin-right: 15px;
                }
            }
        }
    }
}
</style>

<script>
export default {
    data() {
        return {
            items: [
                {
                    id: 1, name: '麻辣烫', active: true, foods: [
                        {
                            name: '杨国福麻辣烫', sales: 1099, price: 18.99, img: 'https://img0.baidu.com/it/u=42964131,4203922624&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
                            , details: '杨国福是一个麻辣烫品牌，采用中草骨汤作为汤底，同时提供应季蔬菜、肉类等产品，并配有数十种小料产品。主要通过线下门店为用户提供餐饮服务，同时提供线上预订以及送货上门等服务'
                        },
                        {
                            name: '张亮麻辣烫', sales: 1000, price: 39.99, img: 'https://img0.baidu.com/it/u=3358478974,2854109130&fm=253&fmt=auto&app=138&f=PNG?w=493&h=370'
                            , details: '张亮麻辣烫是中国知名的麻辣烫连锁品牌，以其独特的口味和丰富的食材选择而受到消费者的喜爱。麻辣烫是一种源自中国四川的街头小吃，特点是将各种食材串在竹签上，然后放入滚烫的汤底中烫煮，最后蘸上特制的调料食用。'
                        },
                    ]
                },
                {
                    id: 2, name: '煲仔饭', active: false, foods: [
                        {
                            name: '三宝煲仔饭', sales: 500, price: 25.99, img: 'https://img0.baidu.com/it/u=1511088578,1076721256&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500'
                            , details: '煲仔饭是广东省广州市的一种特色传统美食，而“三宝煲仔饭”则是煲仔饭中的一种经典口味，通常指的是在煲仔饭中加入了三种主要的配料，这些配料通常是腊味，如腊肠、腊肉和腊鸭等，但具体配料可能因地区和个人口味而有所不同。'
                        },
                        {
                            name: '顺德煲仔饭', sales: 200, price: 22.99, img: 'https://img0.baidu.com/it/u=735706756,3845746614&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
                            , details: '顺德煲仔饭是广东省佛山市顺德区的一道传统美食，顺德区以美食闻名，被誉为“世界美食之都”。顺德煲仔饭以其独特的风味和制作工艺而受到食客们的喜爱。'
                        },
                    ]
                },
                {
                    id: 3, name: '点心', active: false, foods: [
                        {
                            name: '巴利甜甜蛋糕', sales: 300, price: 150.99, img: 'https://img0.baidu.com/it/u=2245112053,2434191479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
                            , details: '欢迎品尝我们的特色蛋糕！采用优质原料，手工制作，口感细腻，甜而不腻。我们提供多种口味选择，包括经典巧克力、清新水果、浓郁奶酪等。每款蛋糕都经过精心装饰，适合生日、庆典或日常享受。现接受预订，新鲜送达，让您的每一个时刻都充满甜蜜！'
                        },
                        {
                            name: '草莓蛋糕', sales: 100, price: 190.99, img: 'https://img1.baidu.com/it/u=995757701,2917929076&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
                            , details: '我们的草莓蛋糕，精选新鲜草莓与丝滑奶油完美结合，每一口都是甜蜜的诱惑。轻盈的海绵蛋糕底，搭配自制草莓酱，酸甜适中，层次分明。精致的装饰，让人赏心悦目。'
                        },
                    ]
                },
                {
                    id: 4, name: '快餐', active: false, foods: [
                        {
                            name: '快餐便当', sales: 800, price: 12.99, img: 'https://img2.baidu.com/it/u=1789587189,1146745956&fm=253&fmt=auto?w=1200&h=800'
                            , details: '我们的快餐便当，精心搭配营养均衡的食材，提供多种口味选择。每份便当包含主菜、蔬菜和主食，确保美味又健康。采用环保包装，方便携带，适合忙碌的上班族。每日新鲜制作，保证食品的新鲜度和口感。无论是工作午餐还是户外活动，都是您的理想选择。立即订购，享受便捷美味的用餐体验！'
                        },
                        {
                            name: '烤鸭', sales: 400, price: 18.99, img: 'https://img1.baidu.com/it/u=882105668,4003133658&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
                            , details: '我们的烤鸭，采用传统工艺精心烤制，皮脆肉嫩，色泽金黄。选用优质肉鸭，秘制香料腌制，确保风味独特。每只烤鸭都经过严格挑选，确保品质上乘。搭配特制酱料和薄饼，让您尽享地道的美味。适合家庭聚餐或节日庆典，为您的餐桌增添喜庆气氛。欢迎预订，体验正宗的烤鸭风味！'
                        },
                    ]
                },
                {
                    id: 5, name: '披萨', active: false, foods: [
                        {
                            name: '意式披萨', sales: 600, price: 32.99, img: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00279-603.jpg'
                            , details: '我们的意式披萨，采用传统手工制作，精选优质原料，包括新鲜番茄、进口奶酪和精选肉类。薄底酥脆，馅料丰富，每一口都是满足。提供多种口味选择，满足不同顾客需求。现烤现卖，保证披萨的新鲜和美味。适合家庭聚餐或朋友聚会，分享这份来自意大利的经典美食。欢迎品尝，享受纯正的意式风味！'
                        },
                        {
                            name: '法式披萨', sales: 300, price: 29.99, img: 'https://img1.baidu.com/it/u=3058195017,588672346&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
                            , details: '我们的法式披萨，融合传统与创新，采用薄脆饼底，精选法国奶酪与新鲜时蔬，搭配经典法式酱料。每片披萨都是艺术与美味的结合，口感层次丰富，风味独特。适合追求高品质生活的您。现点现烤，确保新鲜美味。无论是独自享用还是与亲友分享，都是绝佳选择。立即订购，体验法式风情的美味之旅！'
                        }
                    ]
                },
            ]
        }
    },
    computed: {
        filteredFoods() {
            // 获取当前激活的品类，并返回对应的食物列表
            const activeItem = this.items.find(item => item.active);
            return activeItem ? activeItem.foods : [];
        }
    },
    methods: {
        tapActive(index) {
            if (index < 0 || index >= this.items.length) {
                console.error('无效的索引');
                return;
            }
            // 清除其他元素的高亮并只激活被点击的元素
            this.items.forEach((item, i) => {
                item.active = (i === index);
            });
        }
    }
}
</script>
